
  .example {
    width: 10px;
    height: 10px;
    border: 1px solid #000;
  }
  
  @keyframes earthquake_ripple {
    0% {
    left:0px;
    top:0px;
    opcity:75;
    width:0;
    height:0;
    }
    100% {
    left:-50vw;
    top:-50vw;
    opacity: 0;
    width:100vw;
    height:100vw;
    }
    }
  .earthquake-1,
  .earthquake-2,
  .earthquake-3,
  .earthquake-4 {
    top: 50vh;
    left: 50vw;
    position: fixed;
  }

  
  .earthquake-1::after,
  .earthquake-2::after,
  .earthquake-3::after,
  .earthquake-4::after {
    content: '';
    position: absolute;
    width:0px;
    height:0px;
    border-radius: 50%;
    box-shadow: 1px 1px 40px 20px #ff000033 inset;
  }
  .earthquake-1::after,
  .earthquake-2::after,
  .earthquake-3::after,
  .earthquake-4::after
  {
    -webkit-animation-name:'earthquake_ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
    -webkit-animation-duration: 8s;/*动画持续时间*/
    -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/

    -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
    -webkit-animation-direction: normal;/*定义动画方式*/
  }
  .earthquake-1::after
  {
    -webkit-animation-delay: 0s;/*动画延迟时间*/
  }

  .earthquake-2::after
  {
    -webkit-animation-delay: 2s;/*动画延迟时间*/
  }

  .earthquake-3::after
  {
    -webkit-animation-delay: 4s;/*动画延迟时间*/
  }
  .earthquake-4::after
  {
    -webkit-animation-delay: 6s;/*动画延迟时间*/
  }